<template>
  <!-- 主边栏-上边栏 -->
  <div style="display: flex; line-height:60px; margin-top:2px">
    <div>
        <i id="icon-s-fold" :class="flag" style="font-size: 20px;" @click="convertAside($event)"></i>
    </div>
    <!-- font-weight设置文本粗细，默认400，没有单位 -->
    <div style="flex: 1; text-align:center; font-size: 25px; font-weight: 600" >
        <span>仓库管理系统</span>
    </div>
    <el-dropdown>
        <span class="el-dropdown-link">
            {{userInfo.userAccount}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <!-- 
        userAccount:this.userInfo.userAccount,
                    userName:this.userInfo.userName,
                    userPhone:this.userInfo.userPhone,
                    userSole:this.userInfo.userSole,
                    userSex:this.userInfo.userSex,
                    userAge:this.userInfo.userAge
         -->
        <el-dropdown-menu slot="dropdown">
            <router-link :to="{
                name:'user_detail',
                path:'/user_detail',
                params:{
                    userAccount:this.userInfo.userAccount,
                    userName:this.userInfo.userName,
                    userPhone:this.userInfo.userPhone,
                    userSole:this.userInfo.userSole,
                    userSex:this.userInfo.userSex,
                    userAge:this.userInfo.userAge
                }
            }">
                <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
            <!-- 
            ElementUi中，下拉菜单el-dropdown-menu里面有一个@click事件，导致@click在使用时没反应，
            所以如果使用单击事件时，需要加上native关键字，即@click.native -->
            <el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import user from '@/api/user';
export default {
    name:'Header',
    props:['login'],
    data(){
        return {
            isCollapse: false,
            flag:'el-icon-s-fold',
            autoWidth:'160px',
            userInfo:{
                userAccount:'user',
                userName:'name',
                userPhone:'phone',
                userSole:'sole',
                userSex:'sex',
                userAge:'age'
            }
        }
    },
    methods:{
        convertAside(event) {
            //获取summary的标签对象，采用document方式动态设置标签的宽度
            let summary = document.getElementById('summary')
            console.log('summary：', summary)
            if(this.isCollapse) {
                this.isCollapse = false;
                this.flag = 'el-icon-s-fold';
                this.autoWidth = '160px';
                summary.style.width = '86.2vw'
            } else {
                this.isCollapse = true;
                this.flag = 'el-icon-s-unfold';
                this.autoWidth = '64px';
                summary.style.width = '93.68vw'
            }
            console.log('触发自定义事件，入参：' + this.isCollapse + '，' + this.autoWidth)
            this.$bus.$emit('varColl', this.isCollapse, this.autoWidth)
            // this.$bus.$emit('convertCls', this.isCollapse)
        },
        logout(){
            //清除存储
            localStorage.removeItem('ticket')
            /*
            设置状态为未登录（父组件向子组件传递函数，
            子组件执行父组件函数，并将子组件数据到父组件）
            */
            this.$props.login(false)
            //回退到原页面
            location.href = 'http://localhost:8002/#/'
            console.log('回到首页...')
        },
        getUser(){
            let ticketJsonStr = localStorage.getItem('ticket')
            console.log('ticketJsonStr信息：', ticketJsonStr)
            let ticketJson = JSON.parse(ticketJsonStr)
            console.log('ticketJson信息：', ticketJsonStr)
            let token = ticketJson.token
            console.log('token信息：', token)
            let tokenArr = (token + '').split('-')
            console.log('登录令牌分割后信息：', tokenArr)
            this.userInfo.userId = tokenArr[1]
            let userDto = {
                userId:this.userInfo.userId
            }
            user.getUserDetail(userDto).then(
                response => {
                    console.log('用户详情响应数据：', response)
                    let resCode = response.data.code
                    let resMsg = response.data.message

                    if(resCode == "200") {
                        //响应成功，数据返回
                        // this.userName = response.data.data.user_name
                        // this.password = response.data.data.user_pwd
                        this.userInfo.userAccount = response.data.data.user_account
                        this.userInfo.userName = response.data.data.user_name
                        this.userInfo.userAge = response.data.data.user_age
                        this.userInfo.userSex = response.data.data.user_sex
                        //角色
                        this.userInfo.userSole = response.data.data.user_role
                        this.userInfo.userPhone = response.data.data.user_phone
                    } else {
                        //异常提示
                        this.$message({
                            type: 'error',
                            message: resMsg
                        })
                    }
                },
                error => {
                    console.error('请求用户详情异常，异常信息：', error)
                }
            )
        }
        // loginUserInfo(userId, userAccount){
        //     console.log('userId：', userId)
        //     console.log('userAccount', userAccount)
        // }
    },
    beforeMount(){
        // console.log('触发事件总线...')
        // console.log('this.$bus.$on...', this.$bus.$on)
        // this.$bus.$on('userInfo', this.loginUserInfo)
        this.getUser()
    }
}
</script>

<style scoped>
    #icon-s-fold{
        /* 设置标签垂直居中 */
        align-items: center;
    }
    .el-aside {
        color: #333;
        margin: 0px;
        border: 0px;
    }
    /*设置点击前的样式 */
    a{
        text-decoration: none;
        color: #fff;
        }
    /*设置点击后的样式 */
    .router-link-active {
        text-decoration: none;
        color: #fff;
    }
</style>